<template>
  <main role="main">

    <section class="jumbotron text-center">
      <div class="container">
        <h1>在线视频课程平台</h1>
        <p class="lead text-muted">
          人生是一场马拉松
          不要为打翻的牛奶哭泣
        </p>
        <p>
          <!-- p-3  padding-->
          <router-link to="/list">
            <a href="#" class="btn btn-primary my-2 p-3 font-weight-bold">点击进入所有课程</a>
          </router-link>
          &nbsp;
          <a href="#" class="btn btn-secondary my-2 p-3 font-weight-bold">假按钮哈哈</a>
        </p>
      </div>
    </section>

    <div class="album py-5 bg-light">
      <div class="container">
        <div class="title">最新上线</div>
        <div class="row">
          <div v-for="c in news" :key="c.id" class="col-md-4">
            <the-course :course="c"></the-course>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import {ref, onMounted} from "vue";
import axios from 'axios';
import TheCourse from "@/components/the-course";

export default {
  name: "index-vue",
  components: {TheCourse},
  setup() {
    const news = ref({});

    /**
     * 首页获取最新三门课程展示
     */
    const getNews = () => {
      axios.get(process.env.VUE_APP_SERVER + "/business/web/course/list-new").then((response) => {
        const resp = response.data;
        if (resp.success) {
          news.value = resp.content.list;
        }
      })
    }

    onMounted(() => {
      getNews();
    })

    return {
      news,
    }
  }
}
</script>

<style scoped>
.title {
  margin-bottom: 2rem;
  font-size: 2rem;
  color: #ff6666;
}
</style>